<template>
  <div>
    <!-- 收货地址 -->
    <div class="div1" @click="selectAdress" v-for="(item,index) in list" :key="index">
      <div style="padding-top: 0.4rem;">
        <span class="div1_span1">{{item.name}}</span><span class="div1_span2">{{item.phone}}</span>
        <div style="float: right;margin-top: 0.4rem;"><i class="iconfont icon-youjiantou youjiantou"></i></div>
      </div>
      <div style="padding-bottom: 0.4rem;">
        <span class="div1_span3">{{item.tag}}</span><span
          class="div1_span4">{{item.address}}{{item.address_detail}}</span>
      </div>
    </div>
    <!-- 配送时间 -->
    <div class="div2 display">
      <div class="div2_Left">送达时间:</div>
      <div class="div2_Right">
        <div class="div2_Right1">尽快送达|预计12:09</div>
        <div class="div2_Right2">蜂鸟专送</div>
      </div>
    </div>
    <!-- 支付方式 -->
    <div class="PayMethod">
      <div class="PayMethod_1">
        <van-cell @click="paymethod" title="支付方式" is-link value="在线支付" />
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">支付方式
          <van-radio-group v-model="radio">
            <van-cell-group>
              <van-cell title="货到付款(商家不支持货到付款)" @click="radio = '1'" disabled class="radio_1" icon-size="24px">
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
              <van-cell title="在线支付" clickable @click="radio = '2'" class="radio_1" icon-size="24px">
                <template #right-icon>
                  <van-radio name="2" label-disabled />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </van-popup>
      </div>
      <div>
        <van-cell title="红包" value="暂时只在饿了么APP中支持" />
      </div>
    </div>
    <!-- 商品 -->
    <div class="buyShop">
      <div class="shop">
        <img :src="'https://elm.cangdu.org/img/'+(shop.image_path)" alt="">
        <div class="shopname">{{shop.name}}</div>
      </div>
      <div v-for="(cartfood,index) in cart" :key="index">
        <div class="food display padding3">
          <div style="width: 70%;">{{cartfood.foodName}}</div>
          <div style="width: 20%;color: #f60;margin-top: 0.06rem;">×{{cartfood.foodCount}}</div>
          <div style="width: 10%;text-align: right;">￥{{cartfood.foodPrice}}</div>
        </div>
      </div>
      <div class="food display padding3">
        <div>餐盒</div>
        <div>￥3</div>
      </div>
      <div class="food display padding3">
        <div>配送费</div>
        <div>￥5</div>
      </div>
      <div class="food display padding3">
        <div>订单</div>
        <div style="color: #f60">待支付</div>
        <div style="color: #f60">￥{{totalMoney}}</div>
      </div>
    </div>
    <div class="orderTag">
      <div class="display padding3" @click="orderTag"><span>订单备注</span><span>{{tag}}<i class="iconfont icon-youjiantou"
            style="font-size: 0.4rem;margin-left: 0.2rem;"></i></span></div>
      <div class="display padding3" @click="fapiao"><span>发票抬头</span><span>不需要开发票<i class="iconfont icon-youjiantou"
            style="font-size: 0.4rem;margin-left: 0.2rem;"></i></span></div>
    </div>
    <div class="footer display">
      <div class="Left padding3">
        <div>待支付￥{{totalMoney}}</div>
      </div>
      <div class="Right padding3" @click="submit">确认下单</div>
    </div>
    <van-dialog v-model="showtag">
      <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2118000332,1471525266&fm=26&gp=0.jpg"
        class="img3" />
      <div>{{message}}</div>
    </van-dialog>
  </div>
</template>
<script>
  import Cookie from "js-cookie";
  export default {
    name: 'commitOrder',
    data() {
      return {
        list: [],
        show: false,
        cart: "",
        shop: "",
        tag: "",
        radio: '2',
        allfood: "",
        message: "未登录",
        showtag: false,
        addre: { name: "请选择一个收货地址" }
      }
    },
    computed: {
      totalMoney() {
        let shopId = Cookie.get("shopId");
        return this.$store.getters.getAllMoney(shopId) + 8;
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.$store.commit("changeTitle", "提交订单");
        vm.$store.commit("changeShowMy", true);
        //处理收货地址
        let li = localStorage.getItem("selectAdress");
        if (!li) {
          vm.list.push(vm.addre)
        } else {
          vm.list.push(JSON.parse(li));
        }
        //处理购物车商品  
        let sid = Cookie.get("shopId");
        vm.allfood = JSON.parse(localStorage.getItem("car"));
        vm.allfood.forEach(element => {
          if (element.shopid == sid) {
            vm.cart = [...element.food.buyfood];
          }
        });
        //获取商铺信息
        let shop = Cookie.get("shopId");
        const request1 = vm.axios.get("https://elm.cangdu.org/shopping/restaurant/" + shop);
        vm.axios.all([request1]).then(vm.axios.spread((res1) => {
          vm.shop = res1.data;
          // console.log(vm.shop);
        })).catch(err => console.log(err));
        //获取备注消息
        vm.tag = Cookie.get("carTag");
        // console.log(vm.tag);
      });
    },
    methods: {
      selectAdress() {
        this.$router.push({ name: 'selectAddress' });
      },
      showPopup() {
        this.show = true;
      },
      orderTag() {
        this.$router.push({ name: 'orderTag' });
      },
      fapiao() {
        this.$router.push({ name: 'fapiao' });
      },
      paymethod() {
        this.show = true;
      },
      submit() {
        if (!sessionStorage.getItem("user")) {
          this.showtag = !this.showtag;
          console.log("未登录");
        } else {
          let uId = JSON.parse(sessionStorage.getItem("user"));
          let userId = uId.id;
          this.$router.push({ name: 'payMoney' });
          let shopId = Cookie.get("shopId");
          let now = new Date();
          let nowt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
          this.axios.get("http://127.0.0.1:9988/addYes_order", {
            params: {
              shopId: Cookie.get("shopId"),
              userId: userId,
              shopImg: 'https://elm.cangdu.org/img/' + (this.shop.image_path),
              shopName: this.shop.name,
              buyfood: this.cart,
              state: false,
              buyTime: nowt,
              totalPrice: this.$store.getters.getAllMoney(shopId) + 8,
            }
          }).then((res) => {
            console.log(res);
          }).catch((err) => {
            console.log(err);
          });
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .display {
    display: flex;
    justify-content: space-between;
  }

  .youjiantou {
    font-size: 0.45rem;
  }

  .padding3 {
    padding: 0.3rem 0;
  }

  .div1,
  .div2,
  .div3,
  .buyShop {
    background-color: white;
    padding: 0 0.5rem;
    margin-bottom: 0.3rem;
  }

  .div1 {
    text-align: left;
  }

  .div1_span3 {
    font-size: .3rem;
    color: #fff;
    border-radius: .15rem;
    background-color: #ff5722;
    height: .6rem;
    line-height: .6rem;
    padding: 0 .2rem;
    margin-right: .3rem;
  }

  .div1_span1 {
    font-size: 0.5rem;
    font-weight: 600;
  }

  .div1_span2 {
    font-size: 0.4rem;
  }

  .div2_Left {
    font-weight: 600;
    font-size: 0.5rem;
    padding: 0.6rem 0;
  }

  .div2_Right1 {
    color: #3190e8;
    font-size: 0.4rem;
    padding: 0.4rem 0 0.2rem 0;
    letter-spacing: 0.04rem;
  }

  .div2_Right2 {
    font-size: .3rem;
    color: #fff;
    background-color: #3190e8;
    width: 1.5rem;
    text-align: center;
    border-radius: .12rem;
    padding: .1rem;
    margin-bottom: 0.2rem;
  }

  .shop {
    text-align: left;
    font-size: 0.4rem;
    padding: 0.6rem 0 0.4rem 0;
    overflow: hidden;
  }

  .shop>img {
    width: 1rem;
    margin-right: 0.5rem;
    float: left;
  }

  .shopname {
    float: left;
    margin-top: 0.3rem;
  }

  .food {
    font-size: 0.4rem;
    text-align: left;
  }

  .orderTag {
    font-size: 0.38rem;
    padding: 0 0.4rem;
    background-color: white;
  }

  .footer {
    width: 100%;
    font-size: 0.4rem;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .Left {
    width: 70%;
    background-color: black;
    color: white;
    text-align: left;
    color: white;
    padding-left: 0.4rem;
  }

  .Right {
    width: 30%;
    background-color: #56d176;
    ;
    color: white;
  }

  .PayMethod {
    background-color: #fff;
    margin-top: 8px;
    /*no*/
    padding: 0 .4rem;
    font-size: .5rem;
    color: #666;
    height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-bottom: 5px;
  }

  .PayMethod_1 {
    display: flex;
    justify-content: space-between;
    line-height: 2rem;
  }

  .van-popup--bottom {
    text-align: center;
  }

  .shopcar {
    background-color: #fff;
    margin-top: 8px;
    /*no*/
  }

  .finash {
    background-color: #fff;
    margin-top: 8px;
    /*no*/
    padding: 0 0.4rem;
    height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .van-cell {
    line-height: 0.9rem;
    font-size: 0.45rem;
    display: flex;
    align-items: center;
  }

  .van-cell__value {
    font-size: 13px;
    /*no*/
  }

  .radio_1 {
    display: flex;
    justify-content: space-around;
    height: 1.5rem;
  }

  .van-cell__title {
    text-align: left;
  }

  .img3 {
    width: 100px;
    margin: 0.4rem;
  }

  .van-dialog {
    font-size: 0.4rem;
  }
  .van-radio {
    width: 0.5rem;
    height: 0.5rem;
  }

  /deep/.van-radio__icon {
    width: 0.5rem;
    height: 0.5rem;
  }

  /deep/.van-icon {
    width: 0.5rem;
    height: 0.5rem;
  }
</style>